<template>

  <el-dialog :title="form.course_id ? '编辑课件' : '新增课件'" style="width: 571px;" modal-class="dialog-add"
    v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--form表单-->
    <el-form size="small" ref="form" :inline="true" :model="form" :rules="formRules" :label-width="formLabelWidth">
      <el-form-item label="名称" prop="title">
        <el-input style="width: 160px;" v-model="form.title" maxlength="30" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group size="mini" v-model="form.type">
          <el-radio :label="1" size="mini">总结</el-radio>
          <el-radio :label="2" size="mini">鉴定点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type === 2" label="设备名称" prop="device_name">
        <el-input style="width: 160px;" v-model="form.device_name" maxlength="30" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="abstract">
        <el-input style="width: 450px;" maxlength="500" v-model="form.abstract" placeholder="请输入" type="textarea" />
      </el-form-item>
      <el-form-item label-width="100" :label="form.type === 1 ? '总结视频' : '教学讲解'" prop="video_link">
        <el-upload :file-list="fileList" ref="uploadRef" :http-request="httpRequest" :limit="1"
          :on-exceed="handleExceed">
          <el-button type="primary" style="width: 120px;" :loading="uploadLoading">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label-width="100" v-if="form.type === 2" label="模拟现场考试" prop="video_link1">
        <el-upload :file-list="fileList1" ref="uploadRef1" :http-request="httpRequest1" :limit="1"
          :on-exceed="handleExceed1">
          <el-button type="primary" style="width: 120px;" :loading="uploadLoading1">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import CourseApi from '@/api/course.js';
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '70px',
      /*是否显示*/
      loading: false,
      /*是否显示*/
      dialogVisible: true,
      /*form表单对象*/
      form: {
        title: '',
        type: 1,
        abstract: '',
        device_name: '',
        video_link: '',
        video_link1: ''
      },
      /*form验证*/
      formRules: {
        title: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
        is_delete: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        device_name: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
      },
      options: [],
      fileList: [],
      fileList1: [],
      uploadLoading: false,
      uploadLoading1: false
    };
  },
  props: ['open', 'setParams'],
  watch: {
    open: function (n, o) {
      if (n != o) {
        this.dialogVisible = this.open;
      }
    }
  },
  created() {
    this.getNestedData()
  },
  methods: {
    handleExceed(file) {
      console.log(file, 'files')
      ElMessage({
        message: '文件上传数量限制为1',
        type: 'error'
      });
      // this.$refs.uploadRef.clearFiles()
    },
    handleExceed1(file) {
      ElMessage({
        message: '文件上传数量限制为1',
        type: 'error'
      });
      // this.$refs.uploadRef1.clearFiles()
      // this.$refs.uploadRef1.handleStart(file[0])
    },
    httpRequest(data) {
      if (!data.file) return
      this.uploadLoading = true
      let formData = new FormData()
      formData.append('iFile', data.file)
      formData.append('file_type', 'video')
      CourseApi.batchImport(formData).then(res => {
        this.uploadLoading = false
        if (res.code == 1) {
          this.fileList = [{
            name: res.data.real_name,
            url: res.data.file_path
          }]
        } else {
          this.$refs.uploadRef.clearFiles()
        }
      }).catch(error => {
        this.$refs.uploadRef.clearFiles()
        this.uploadLoading = false
      });

    },
    httpRequest1(data) {
      if (!data.file) return
      this.uploadLoading1 = true
      let formData = new FormData()
      formData.append('iFile', data.file)
      formData.append('file_type', 'video')
      CourseApi.batchImport(formData).then(res => {
        this.uploadLoading1 = false
        if (res.code == 1) {
          this.fileList1 = [{
            name: res.data.real_name,
            url: res.data.file_path
          }]
        } else {
          this.$refs.uploadRef1.clearFiles()
        }
      }).catch(error => {
        this.$refs.uploadRef1.clearFiles()
        this.uploadLoading1 = false
      });

    },
    getNestedData() {
      let Params = {};
      CourseApi.getNestedData(Params, true)
        .then(data => {
          this.options = data.data
        })
        .catch(error => { });
    },
    handleChange() {

    },
    /*添加*/
    onSubmit() {
      let msg = '请上传总结视频'
      if (this.form.type === 2) {
        msg = '请上传教学讲解'
        if (!this.fileList1 || !this.fileList1.length) {
        ElMessage({
          message: '请上传模拟现场考试',
          type: 'error'
        });
        return false
      }
      }
      if (!this.fileList || !this.fileList.length) {
        ElMessage({
          message: msg,
          type: 'error'
        });
        return false
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          let self = this;
          self.loading = true;
          let params = { ...self.form, ...this.setParams };
          params.video_link = this.fileList[0].url
          if (this.form.type === 2) {
            params.video_link1 = this.fileList1[0].url
          } else {
            delete params.device_name
          }
          params.video_type = 1
          let key = 'addCourseware'
          let msg = '新增成功'
          if (self.form.course_id) {
            key = 'updateCourseware'
            msg = '编辑成功'
          }
          CourseApi[key](params, true)
            .then(data => {
              self.loading = false;
              ElMessage({
                message: msg,
                type: 'success'
              });
              self.dialogFormVisible(true);
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },
    setTitle({ title, id, data }) {
      console.log(data, 'data')
      this.form.course_id = id
      this.form.title = data.title
      this.form.type = data.type
      this.form.device_name = data.device_name
      this.fileList = [{ name: '教学讲解.mp4', url: data.video_link }]
      if (data.video_link1) {
        this.fileList1 = [{ name: '模拟现场考试.mp4', url: data.video_link1 }]
      }
      this.form.abstract = data.abstract
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit('close', {
          type: 'success',
          openDialog: false
        });
      } else {
        this.$emit('close', {
          type: 'error',
          openDialog: false
        });
      }
    }
  }
};
</script>

<style></style>
